<template>
  <div class="set">
    <div class="fun-btn">
      <el-button size="small" type="primary" @click="handleSave">保存</el-button>
      <el-button size="small" plain @click="handleCloseAll">全部关闭</el-button>
    </div>
    <div class="text">
      <span v-for="(item, index) in setSrcFormat"
            :key="index">
        {{index !== 0 ? '/' : ''}}{{item.dictLabel}}{{'-' + item.length}}
      </span>
    </div>

    <div class="list-box">
      <el-table
        :data="tableData"
        border
        class="table">
        <el-table-column
          show-overflow-tooltip
          prop="dictLabel"
          label="字段">
        </el-table-column>
        <el-table-column
          prop="dictValue"
          label="英文字段名">
        </el-table-column>
        <el-table-column
          prop="switch"
          align="center"
          label="是否使用">
          <template slot-scope="scope">
            <el-switch @change="handleChange" v-model="scope.row.switch"></el-switch>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="length"
          align="center"
          label="生成的长度（字符串默认为0）"
          width="230">
        </el-table-column>
        <el-table-column
          prop="sort"
          width="150"
          align="center"
          label="排序">
          <template slot-scope="scope">
            <avue-input-number v-model="scope.row.sort"
                               :precision="0"
                               style="width: 120px"
                               @blur="handleInput"
                               :min-rows="0"
                               :max-rows="9999"></avue-input-number>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>

export default {
  name: 'subPathSet',
  props: {
    tableDataList: {
      type: Array,
      default: () => ([])
    },
    rowData: {
      type: Object,
      default: () => ({})
    },
    flog: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      srcFormat: [],
      tableData: []
    }
  },
  mounted () {
    this.tableData = this.tableDataList
    this.handleSetSrcFormat()
  },
  computed: {
    setSrcFormat () {
      return this.srcFormat
    }
  },
  watch: {
    flog () {
      this.srcFormat = []
      this.tableData.map((item, index) => {
        item.length = 0
        item.switch = false
        item.sort = Number(index + 1)
      })
      this.handleSetSrcFormat()
    }
  },
  methods: {
    handleSetSrcFormat () {
      this.srcFormat = []
      const arr = this.rowData.subPath.split('/')
      arr.map(item => {
        this.tableData.map(items => {
          if (item === items.dictValue) {
            this.srcFormat.push(items)
            items.switch = true
          }
        })
      })
    },
    handleSave () {
      this.$emit('handleSave', this.srcFormat)
    },
    handleChange () {
      // 选择
      this.srcFormat = []
      this.tableData.map(item => {
        if (item.switch) {
          this.srcFormat.push(item)
        }
      })
    },
    handleInput () {
      for (let i = 0; i < this.srcFormat.length - 1; i++) {
        // Number(this.srcFormat[i].sort)
      }
    },
    handleCloseAll () {
      this.srcFormat = []
      this.tableData.map(item => {
        item.switch = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
